<script setup lang="ts">

import {ref, onMounted} from 'vue'
import { Search,ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'
import { ElButton, ElDialog } from 'element-plus'
import router from '@/router'
import { GetUser } from "@/utils/lStorage"
import { useRoute } from 'vue-router'

import {apiTaskDetail,apiDeviceList,apiProductList} from '@/api/api'
import {backTo} from '@/utils/jump'

const taskId = ref(useRoute().query.id)
const detail = ref({})


async function handlerTaskDetail() {
	if (!taskId.value){
      ElMessage.error("任务不存在")
      return 
	}
	 
  const req = {
    TaskId: taskId.value
  }

  const data = await apiTaskDetail(req)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }

  detail.value = data.DATA.Task

  handlerProductList()
  handlerDeviceList()
}


const pageConfig = ref({
  pageNum : 1,
  pageSize :15,
  total:0,
})

const deviceList = ref([])
async function handlerDeviceList() { 
  const req = {
    pageNum:pageConfig.value.pageNum,
    pageSize:pageConfig.value.pageSize,
    DeviceGroupId: detail.value.DeviceGroupId
  }

  const data = await apiDeviceList(req)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }
  deviceList.value = data.DATA.DeviceList
  pageConfig.value.pageNum = data.DATA.PageNumber
  pageConfig.value.pageCount = data.DATA.PageCount
  pageConfig.value.pageSize = data.DATA.PageSize
  pageConfig.value.total = data.DATA.TotalCount
}


const pageConfig2 = ref({
  pageNum : 1,
  pageSize :15,
  total:0,
})

const productList = ref([])
async function handlerProductList() { 
  const req = {
    pageNum:pageConfig2.value.pageNum,
    pageSize:pageConfig2.value.pageSize,
    TaskId: taskId.value
  }

  const data = await apiProductList(req)
  if (data.CODE != "ok") {
      console.log(data)
      ElMessage.error("执行失败， 请联系管理员")
      return 
  }
  productList.value = data.DATA.ProductList
  pageConfig2.value.pageNum = data.DATA.PageNumber
  pageConfig2.value.pageCount = data.DATA.PageCount
  pageConfig2.value.pageSize = data.DATA.PageSize
  pageConfig2.value.total = data.DATA.TotalCount
  console.log(productList.value)
}





onMounted(() => {
  handlerTaskDetail()
})







</script>

<template>
  <el-row :gutter="20" justify="space-between" >
    <el-col :span="8">
      <el-button type="primary" @click="backTo" >返回</el-button>  
    </el-col>
  </el-row>

<div class="info_box">

    <el-descriptions title="详情">
    <el-descriptions-item label="执行分组">{{detail.DeviceGroupName}}</el-descriptions-item>
    <el-descriptions-item label="名称">{{detail.Name}}</el-descriptions-item>
    <el-descriptions-item label="说明">{{detail.Desc}}</el-descriptions-item>
    <!-- <el-descriptions-item label="说明">{{detail.Desc}}</el-descriptions-item> -->
    <!-- <el-descriptions-item label="设备数量">{{detail.DeviceCount}}</el-descriptions-item> -->
  </el-descriptions>


      <el-divider content-position="left">任务商品列表</el-divider>
 <el-table :data="productList" style="width: 100%">
    <el-table-column prop="DeviceGroupName" label="执行分组" width="300" />
    <el-table-column prop="Account" label="逛逛名称" />
    <el-table-column prop="ProductCode" label="产品ID"  />
    <el-table-column prop="ProductTitle" label="产品标题"  />
    <el-table-column prop="IsStart" label="是否精选"  />
    <el-table-column prop="ReleaseTime" label="发布时间"  />
    <el-table-column prop="CreateTime" label="创建时间" :formatter="formatCreateTime" width="180" />
        <el-table-column label="操作" width="250" >
        <template  #default="item">

          <el-button link type="primary" @click="handleProductDetail(item.row)">详情</el-button>
          <el-button link type="danger" @click="handlerProductDelete(item.row)"  >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <el-pagination class='pagination' size="large" :page-size="pageConfig2.pageSize" layout=" prev, pager, next, total" :total="pageConfig2.total"
      v-model:current-page="pageConfig2.pageNum" @current-change="handlerProductList" />

    <el-divider content-position="left">执行设备列表</el-divider>
    
  <el-table :data="deviceList" style="width: 100%">
    <el-table-column prop="Name" label="名称" width="300" />
    <el-table-column prop="DeviceGroupName" label="分组" width="300" />
    <el-table-column prop="Desc" label="说明"  />


    <el-table-column prop="CreateTime" label="创建时间" :formatter="formatCreateTime" width="180" />

    <el-table-column label="操作" width="350" >
        <template  #default="item">
          <el-button link type="primary" @click="handlerDeviceDetail(item.row)">详情</el-button>
          <el-button link type="danger" @click="handlerDeviceDelete(item.row)"  >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <el-pagination class='pagination' size="large" :page-size="pageConfig.pageSize" layout=" prev, pager, next, total" :total="pageConfig.total"
      v-model:current-page="pageConfig.pageNum" @current-change="handlerDeviceList" />

</div>




</template>